<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-button type="primary" @click="addRole">添加</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="data.list" border style="width: 100%">
      <el-table-column prop="roleId" label="ID" width="180" />
      <el-table-column prop="roleName" label="角色名" width="180" />
      <el-table-column prop="authority" label="操作">
        <template #default="scope">
          <el-button type="primary" @click="editAuthority(scope.row)">
            修改权限
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import Api from "@/request/api";
import { InitData, ListInt } from "@/type/role";
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, reactive } from "vue";
import { useRouter } from "vue-router";

const data = reactive(new InitData());
const router = useRouter();
onMounted(() => {
  getRole();
});

const getRole = () => {
  Api.getRoleList().then((res: any) => {
    data.list = res.data.list;
  });
};
const addRole = () => {
  ElMessageBox.prompt("请输入角色名称", "添加", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(({ value }) => {
      //输入框中的值
      if (value) {
        data.list.push({
          roleId: data.list.length + 1,
          roleName: value,
          authority: [],
        });
      }
      ElMessage({
        type: "success",
        message: `【${value}】角色添加成功！`,
      });
    })
    .catch((error) => {
      Promise.reject(error);
    });
};
const editAuthority = (row: ListInt) => {
  console.log(row);

  router.replace({
    name: "authority",
    params: {
      id: row.roleId,
      authority: row.authority,
    },
  });
};
</script>

<style lang="scss" scoped></style>
